<template>
	<div class="consumercenter" :class="this.$store.getters.isIphoneX ? 'pad-top80' : 'pad-top'">
		<back-header title="消费记录"></back-header>
		<div class="bill-list" id="htmlDataList">
			<app-loading v-if="!consumelist"></app-loading>
			<div v-else-if="consumelist.length == 0" style="text-align: center;padding:100px 0;font-size:16px;color:#555;">暂无数据</div>
			<div v-else class="bill-item" v-for="item in consumelist">
				<div class="info text-beyond">
					<span>{{item.content}}</span>
				</div>
				<p class="time">{{item.addtime}}</p>
				<span class="money">{{item.coin_math}}金币</span>
			</div>
		</div>
	</div>
</template>
<script type="text/javascript">
	import appLoading from '../components/loading'
	import backHeader from '../components/backHeader'
	export default{
		name:"appConsumercenter",
		components:{backHeader,appLoading},
		data(){
			return {
				consumelist:"",
			}
		},	
		mounted(){
			this.consumeList();
		},
		methods:{
			consumeList(){
				this.$jsonp(`${this.URL_PREFIX}/OpenAPI/V1/User/consume`,{token:this.$store.state.userInfo.token,page:1}).then((response) => {
		              console.log(response)
		              let list = response.data;
		              for(let i=0;i<list.length;i++){
		              		list[i]['addtime'] = this.getLocalTime(list[i]['addtime']);
		              }
		              this.consumelist = list;
		  		 })
			},
			getLocalTime(nS) {
				return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
			}

		}
	}
</script>

<style lang="less" scoped>
	.bill-list{
		padding:0 10px;
	}
	.bill-item{
		padding: 10px 5px;
	    background: #fff;
	    border-bottom: 1px solid #f2f2f2;
	    position: relative;
	}
	.bill-item .info {
	    max-width: 100%
	}
	.bill-item .info span {
	    font-size: 15px;
	}
	.bill-item .time {
	    font-size:14px;
	    color: #bdbdbd;
	}
	.bill-item .money {
	    position: absolute;
	    right: 0;
	    top: 35%;
	    color: #fdaa40;
	    font-size:14px;
	}
</style>